<template>
  <view class="detail-content">
    <leave_note />
    <view class="detail-box flex_p_lr">
      <view class="list_item_view">
        <view class="list_item flex_p_lr flex_y_center">
          <view class="line_co rflex flex_y_center">
            <view class="flex_3 rflex flex_y_center">
              <image class="image" src="https://public-yz.oss-cn-nanjing.aliyuncs.com/2025/07/15/540827228f614df794797fc52046cdb9.png" />
              <view class="flex_w_10"></view>
              <view class="co_name">{{form?.part?.partName}}</view>
            </view>
            <view class="flex_1 rflex flex_x_end">
              <view class="view price-tip">
                <image src="https://public-yz.oss-cn-nanjing.aliyuncs.com/f815ee6b93d1a9185df47cdaa4c6881fbfdde737615ab2a2ec430776a3903d50.png"  mode="heightFix" style="height: 30px"/>
              </view>
            </view>
          </view>
          <view class="flex_h_25 flex_y_center rflex">
            <view class="two_line"></view>
            <view class="flex_w_8"></view>
            <view class="name-tel">{{form.createTime}}</view>
            <view class="flex_w_8"></view>
            <view class="two_line"></view>
          </view>
          <view class="flex_h_15 rflex flex_y_center">
            <view class="heng_box"></view>
          </view>
          <view class="main-content rflex">
            <view class="flex_2">
              <view class="product_introduction flex_p_lr flex_no_pl">
                <uv-parse :content="form.orderXjRemark || '暂无询价说明'"></uv-parse>
              </view>
            </view>
            <view class="flex_1">
              <image :src="form.part?.partImage.split(',')[0]" style="width: 90%;height: 80px"/>
            </view>
          </view>
        </view>
      </view>
      <view class="flex_h_15"></view>
      <order_detail_title title="报价信息" />
      <view class="flex_h_10"></view>
      <view class="list_item_view">
        <view class="list_item flex_p_lr flex_y_center" style="padding-top: 10px;border: 1px dashed grey">
          <view class="rflex flex_y_center" style="font-weight: bolder;height: auto;padding: 5px">
            <view class="flex_3">
              <view style="font-size: 28rpx">报价名称：{{form?.orderBjName}}</view>
            </view>
            <view class="flex_w_5"></view>
            <view class="flex_1 rflex flex_y_center flex_x_end">
              <uv-button type="error" v-if="form?.status !=2" plain size="mini">待审批</uv-button>
              <uv-button type="success" size="mini" plain v-else>通过</uv-button>
            </view>
          </view>
          <view class="rflex flex_y_center" style="height: auto;padding: 5px;font-size: 26rpx">报价方案：{{form?.orderBjPlan}}</view>
          <view class="flex_h_8"></view>
          <view class="main-content rflex" style="color: grey;font-size: 26rpx">
            <view>备注信息：</view>
            <view class="flex_2">
              <view class="product_introduction flex_p_lr flex_no_pl">
                <uv-parse :content="form.priceRemark || '暂无报价说明'"></uv-parse>
              </view>
            </view>
          </view>
          <view class="flex_h_8"></view>
        </view>
      </view>
      <view class="flex_h_25 rflex flex_y_center" style="margin-top: -5px">
        <view class="flex_1 rflex flex_x_center flex_y_center">
          <image src="http://public-yz.oss-cn-nanjing.aliyuncs.com/2025/05/19/fcdb97dff0334dabb0d01ee8b35cfe1e.png" style="height: 25px;width: 8px"></image>
        </view>
        <view class="flex_1 rflex flex_y_center flex_x_center">
          <image src="http://public-yz.oss-cn-nanjing.aliyuncs.com/2025/05/19/fcdb97dff0334dabb0d01ee8b35cfe1e.png" style="height: 25px;width: 8px"></image>
        </view>
      </view>
      <view class="list_item_view">
        <view class="list_item flex_p_lr rflex flex_y_center flex_x_center" style="padding-top: 30px;padding-bottom: 30px;margin-top: -5px">
          <view class="price-tips" style="font-weight: bolder;font-size: 38rpx;color: #1B76FF;font-style: italic" v-if="form.price" >报价金额：¥{{form.price}}</view>
          <view class="price-tips" style="font-weight: bolder;font-size: 38rpx;color: #1B76FF;font-style: italic" v-else>暂无报价金额</view>
        </view>
      </view>
      <view class="flex_h_10"></view>
      <order_detail_title title="报价图片" />
      <view class="flex_h_10"></view>
      <view class="list_item_view">
        <view class="list_item flex_p_20 rflex flex_y_center flex_x_center">
          <view class="flex_1" v-if="form.priceImg">
            <view class="imgs" style="width: 60px;height: 60px;margin-right: 8px;margin-top: 10px" v-for="item in form.priceImg.split(',')" :key="item">
              <image :src="item" style="width: 100%;height: 100%" mode="aspectFit" @click="lookImage(item)"></image>
            </view>
          </view>
          <view v-else>暂无报价图片</view>
        </view>
      </view>
      <view class="flex_h_10"></view>
      <order_detail_title title="报价文件" />
      <view class="flex_h_10"></view>
      <view class="list_item_view">
        <view class="list_item flex_p_lr">
          <view v-if="form.priceFileList && form.priceFileList.length > 0">
            <view class="file-box rflex flex_y_center" v-for="item in form?.priceFileList" :key="item.id" @click="toLook(item)">
              <image src="https://public-yz.oss-cn-nanjing.aliyuncs.com/3bc8efa4d614ac4ed5d0c86ee7e8b369f6329f51c2a53216f95052dda43daa99.png" style="width: 45px;height: 45px" v-if="item?.fileSuffix === '.docx' || item?.fileSuffix === '.doc'"></image>
              <image src="https://public-yz.oss-cn-nanjing.aliyuncs.com/8745869e2e3df0c5f6cad1ba65144ea1a7bad9ad6aaca92b177a5118c5c9b091.png" style="width: 45px;height: 45px" v-else-if="item?.fileSuffix === '.xlsx' || item?.fileSuffix === '.xls'"></image>
              <image src="https://public-yz.oss-cn-nanjing.aliyuncs.com/2025/07/05/41c67d73661a44eba267089374ff2530.png" style="width: 45px;height: 45px" v-else></image>
              <div class="flex_w_10"></div>
              <view class="flex_1 cflex file-item">
                <view class="flex_1 rflex flex_y_center file-name">询价文件{{item.fileSuffix}}</view>
                <view class="flex_1 rflex flex_y_center file-time">{{item.createTime}}</view>
              </view>
            </view>
          </view>
          <view class="flex_p_20 rflex flex_x_center flex_y_center" v-else>暂无报价文件</view>
        </view>
      </view>
    </view>
    <view class="flex_h_50"></view>
    <view class="flex_h_20"></view>
    <view class="flex_1 flex_p_lr lastBtn" v-if="form?.status == 0">
      <uv-button color="#2D4C98" shape="circle" @click="handleToInquiry">我要报价</uv-button>
    </view>
  </view>
</template>


<script>
import Leave_note from "@/components/leave_note.vue";
import PriceApi from "@/api/price/price";
import Order_detail_title from "@/components/order_detail_title.vue";

export default {
  components: {Order_detail_title, Leave_note},
  onLoad(options) {
    this.options = options;
    this.getDetailInfo();
  },
  data() {
    return {
      wordList: [],
      xlsxList: [],
      options: {},
      form:{}
    };
  },
  methods: {
    async getDetailInfo() {
      const data = await PriceApi.getSupplierPriceDetail(this.options.id);
      this.form = data?.data;
      let imgArr = [];
      if (this.form.priceImg) {
        const arr = this.form.priceImg.split(',');
        arr.forEach(item => {
          // FileApi.queryOSS(item).then(res => {
          //   console.log(res.data.data.url);
          // });
        })
      }
    },

    handleToInquiry() {
      uni.navigateTo({
        url: `/page_price/inquiry?linkId=${this.form.id}`
      })
    },
    lookImage(item) {
      uni.previewImage( {
        urls: [item]
      })
    },
    toLook(item) {
      uni.downloadFile( {
        url: item.url,
        success: function (res) {
          console.log(res.tempFilePath);
          uni.openDocument({
            filePath: res.tempFilePath,
            success: function (res) {
              console.log('打开文档成功')
            }
          })
        }
      })
      // uni.setClipboardData({
      //   data: item.url,
      //   success: function () {
      //     uni.showToast({
      //       title: '链接已复制到粘贴板，请在浏览器中打开！',
      //       icon: 'none',
      //       duration: 2000
      //     });
      //   },
      // });
    },
  }
}
</script>

<style scoped lang="scss">
.detail-content{
  padding-bottom: 30px;
  .detail-box{
    margin-top: -40px;
    .name-tel {
      font-size: 25rpx;
      color: #1B76FF;
    }
    .two_line{
      height: 12px;
      width: 3px;
      background: #1B76FF;
    }
    .title-txt{
      font-size: 32rpx;
      font-weight: bolder;
    }
    .file-box{
      height: 65px;
      border-bottom: 1px solid #eee;
      .file-item{
        height: 45px;
        font-size: 24rpx;
        color: #777777;
        .file-name{
          color: #232323;
        }
      }
    }
  }
  .list_item_view{
    .list_item{
      border-radius: 12px;
      background-image: linear-gradient(#2D4C9829,#415B9A00);
      .line_co{
        height: 45px;
        image{
          width: 25px;
          height: 25px;
        }
        .threeMini {
          padding: 1px 3px;
          margin-right: 5px;
          background: #FF000029;
          border: 1px solid #FF0000;
          color: #FF0000;
          font-size: 20rpx;

          &.bg_blue {
            background: #1B76FF29;
            border: 1px solid #1B76FF;
            color: #1B76FF;
          }

          &.bg_yellow {
            background: #FFAA5C29;
            border: 1px solid #FFAA5C;
            color: #FFAA5C;
          }
        }
        .co_name{
          font-weight: bolder;
        }
        .price-tip{
          position: relative;
          top: -5px;
          left: 12px;
        }
      }
      .status_box{
        height: 30px;
        image{
          height: 20px;
        }
      }
      .heng_box{
        width: 40px;
        height: 2px;
        background: #D4D4D4;
      }
      .main-content{
        .product_name{
          font-weight: bold;
          font-size: 28rpx;
        }
        .product_introduction{
          font-size: 24rpx;
          color: #868686;
          display: -webkit-box;
          -webkit-line-clamp: 4; /* 限制文本显示为3行 */
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
  .file-box{
    height: 65px;
    border-bottom: 1px solid #eee;
    .file-item{
      height: 45px;
      font-size: 24rpx;
      color: #777777;
      .file-name{
        color: #232323;
      }
    }
  }
  .lastBtn{
    position: fixed;
    bottom: 25px;
    width: 98%;
  }
}
</style>
